import React from 'react'
import { Card, Button, Form, Input, Table, Space, Tag } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/lib/table'

interface DataType {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}

const columns: ColumnsType<DataType> = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green'
          if (tag === 'loser') {
            color = 'volcano'
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          )
        })}
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
]

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]
export default function HospitalSet() {
  const onFinish = (values: any) => {
    console.log('Success:', values)
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }
  return (
    <Card>
      <Form
        name="basic"
        // antd中栅格系统一行24份
        // labelCol={{ span: 8 }} // 表单项的文本占一行的8份
        // wrapperCol={{ span: 16 }} // 表单项占一行的16份
        // initialValues={{ remember: true }}
        onFinish={onFinish} // 点击提交按钮,表单校验通过时触发
        onFinishFailed={onFinishFailed} // 点击提交按钮,表单校验不通过时触发
        // autoComplete="off"
        layout="inline" // 让表单中的表单项横向排列
        style={{ marginBottom: 20 }}
      >
        <Form.Item
          // label="Username" 表单项对应的文本
          name="username"
          // rules就是当前表单项的表单校验规则
          // rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          // label="Password"
          name="password"
          // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input placeholder="医院编码" />
        </Form.Item>

        <Form.Item>
          {/* button上有htmlType="submit" 表示当前按钮是当前表单的提交按钮 */}
          <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button>清空</Button>
        </Form.Item>
      </Form>

      <Button type="primary" style={{ marginRight: 10 }}>
        添加
      </Button>
      <Button type="primary" danger disabled>
        批量删除
      </Button>
      {/* columns: 控制表单当中的表头显示什么内容 , dataSource: 决定了表格的具体渲染的数据*/}
      <Table columns={columns} dataSource={data} style={{ marginTop: 20 }} />
    </Card>
  )
}
